
<template>
  <f7-panel
    left
    swipe
    swipe-no-follow
    resizable
    :opened="opened"
    @panel:closed="switchpages()"
  >
    <f7-page class="qm-panel">
      <f7-block>
        <!-- 头部名称和设置 -->
        <div class="header">
          <div class="headertitle">
            <img :src="data.img" alt="" v-if="data.img" />
            <div v-else class="headerimg">
              <span>{{ surname }}</span>
            </div>
          </div>
          <div class="name">{{ data.updatedUserName }}</div>
          <div class="qm-icon">
            <f7-link  panel-close="left" @click="openedpanel('/ui/set/index')">
              <f7-icon f7="gear_alt"></f7-icon>
            </f7-link>
          </div>
        </div>
        <f7-card class="qm-card">
          <f7-link panel-close="left" @click="openedpanel('/ui/terminal/index1')">
            <qm-field label="系统切换" readonly is-link>
              <template #left-icon>
                <f7-icon
                  f7="arrow_right_arrow_left_circle_fill"
                  class="card-icon"
                ></f7-icon>
              </template>
            </qm-field>
          </f7-link>
          <div class="title">
            当前 <span style="color: #719ef5">{{data.serverName}}</span>
          </div>
          <div class="title">{{data.serverName}}</div>
        </f7-card>
        <!-- 通讯录跳转 -->
        <f7-list class="qm-list">
          <f7-list-item
            link="/ui/notice/index5"
            title="通讯录"
            panel-close="left"
          >
            <f7-icon slot="media" f7="person_2_fill"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="实名认证" panel-close="left" @click="arr">
            <f7-icon slot="media" f7="person_badge_plus"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="人脸采集" panel-close="left" @click="arr">
            <f7-icon slot="media" f7="person_crop_square"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="APP分享" panel-close="left">
            <f7-icon slot="media" f7="arrowshape_turn_up_right"></f7-icon>
          </f7-list-item>
          <f7-list-item
            link="#"
            title="检查更新"
            after="V1.0.2"
            panel-close="left"
          >
            <f7-icon slot="media" f7="arrow_2_circlepath"></f7-icon>
          </f7-list-item>
          <f7-list-item
            link="/ui/set/index"
            title="退出登录"
            panel-close="left"
          >
            <f7-icon slot="media" f7="power"></f7-icon>
          </f7-list-item>
        </f7-list>
        <!-- 清除缓存 -->
        <f7-button large raised class="qm-button" >
          <f7-icon f7="paintbrush" color="blue" ></f7-icon>
          清除缓存</f7-button
        >
      </f7-block>
    </f7-page>
  </f7-panel>
</template>

<script>
    module.exports = {
        name:'test',
    data() {
    return {
      opened:false,
      miniurl:'',
      data: this.$framework.account.getminiapphomepage(),
    };
  },
  computed: {
    surname() {
      return this.data.updatedUserName.charAt(this.data.updatedUserName.length - 1);
    },
  },
  methods: {
    switchpages(){
      if(window.plus){
      plus.webview.close("baidu")
      plus.webview.close("test")
      plus.webview.getLaunchWebview().evalJS("vue.$f7.views.current.router.navigate('" + this.miniurl + "')")
      } else{
        this.$f7.views.current.router.navigate(this.miniurl)
      }
    },
    arr(){
        this.$framework.miniApp.open("baidu", null, "white")
    },
    // 本地页面跳转需要侧边栏关闭后再跳转 ，否则后续侧边栏无法滑出
    openedpanel(url){
      this.opened = false,
      this.miniurl = url
    }
  },
    }
</script>

<style>
</style>
